// components/BottomModal/index.tsx
import { View, Button, ITouchEvent } from "@tarojs/components";
import { Component, CSSProperties } from "react";
import "./index.scss";

class BottomModal extends Component {
  static defaultProps = {
    maskClosable: true,
    confirmText: "确认",
    cancelText: "取消",
  };

  // 阻止滑动穿透
  preventTouchMove = (e) => {
    e.preventDefault();
    e.stopPropagation();
  };

  handleMaskClick = () => {
    if (this.props.maskClosable) {
      this.props.onClose?.();
    }
  };

  render() {
    const {
      visible,
      title,
      children,
      confirmText,
      cancelText,
      onConfirm,
      onClose,
    } = this.props;

    return (
      <View className={`modal-container ${visible ? "show" : ""}`}>
        {/* 遮罩层 */}
        <View
          className="modal-mask"
          onClick={this.handleMaskClick}
          catchMove
          onTouchMove={this.preventTouchMove}
        />

        {/* 内容区域 */}
        <View className="modal-content">
          {/* 标题栏 */}
          {title && <View className="modal-header">{title}</View>}

          {/* 内容插槽 */}
          <View className="modal-body">{children}</View>

          {/* 操作按钮 */}
          <View className="modal-footer">
            <Button className="btn-cancel" onClick={onClose}>
              {cancelText}
            </Button>
            <Button className="btn-confirm" onClick={onConfirm}>
              {confirmText}
            </Button>
          </View>
        </View>
      </View>
    );
  }
}

export default BottomModal;
